<template>
    <div class="pageCon">
        <van-pull-refresh v-model="isLoading" @refresh="resHandle">
            <div class="indexHeader">
                <div class="search" @click="hrefOpne('false', 'search')">
                    <img src="../../assets/index/search3.png" alt="" />
                    <span class="searchTip">搜索商品名称</span>
                </div>
                <!-- 购物车 -->
                <div class="cart" @click="hrefOpne('false', 'cart')">
                    <div class="cart-num" v-if="cartnum">{{ cartnum }}</div>
                    <div>
                        <van-icon name="shopping-cart" />
                    </div>
                </div>
            </div>
            <!-- 头部结束 -->
            <div class="content">
                <!-- 轮播 -->
                <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                    <van-swipe-item v-for="(item, index) in mainPics" :key="index">
                        <img @click="hrefBanner(item.bannerPro, item.bannerHref)"
                            :src="alPath + 'zhonghui/banner/' + item.bannerName" alt="" />
                    </van-swipe-item>
                </van-swipe>
            </div>

            <!--中汇门店，特殊展示 -->
            <template v-if="shopFlag">
                <div class="shopMainBox">
                    <div class="enterBox" @click="toPage(1)">
                        <img src="../../assets/index/active/rechargeenter.png" alt="" />
                        <img src="../../assets/index/active/GO.png" alt="" />
                    </div>

                    <div class="topBox" @click="toPage(2)"></div>

                    <div class="bodyBox">
                        <div class="bodyTitle"><span>分类专区</span></div>
                        <div class="bodyMain">
                            <div class="bodyNavBox">
                                <span @click="toMoreZq(item, 0, 0)" v-for="(item, index) in specialIdList"
                                    :key="index"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </template>





            <!-- 新限时秒杀 开始 -->
            <div class="seckill-new" v-if="groupBuys != '' && is_on != -1">
                <!-- 顶部 -->
                <div class="seckill-new-time">
                    <div>
                        <span class="seckTit">限时秒杀 </span>
                        <van-count-down :time="groupBuys.time">
                            <template #default="timeData">
                                <span class="block-new">{{
            timeData.hours < 10 ? "0" + timeData.hours : timeData.hours }} </span>
                                        <span class="colon-new">:</span>
                                        <span class="block-new">{{
            timeData.minutes < 10 ? "0" + timeData.minutes : timeData.minutes }}</span>
                                                <span class="colon-new">:</span>
                                                <span class="block-new">{{
            timeData.seconds < 10 ? "0" + timeData.seconds : timeData.seconds
        }}</span>
                            </template>
                        </van-count-down>
                    </div>
                    <div @click="hrefOpneNews(true)">
                        更多
                        <van-icon name="arrow"></van-icon>
                    </div>
                </div>
                <!-- 商品展示区域 -->
                <div class="seckill-new-main" @click="hrefOpneNews(false, groupBuys.group_id)">
                    <img class="seckill-new-img" :src="alPath +
            'product/product_' +
            groupBuys.product_id +
            '/' +
            groupBuys.product_pic
            " alt="" />
                    <div class="seckill-new-mainLeft">
                        <div class="seckillNewName">
                            {{ groupBuys.product_name }}
                        </div>
                        <div class="seckillNewTag">
                            <span>爆</span>
                            <span>全网最低价</span>
                            <span>品牌秒杀</span>
                        </div>
                        <div class="lineBox">
                            <div class="newlength-box">
                                <span>{{ groupBuys.progress }}%</span>
                                <div :style="{ width: groupBuys.progress + '%' }" class="newlength"></div>
                            </div>
                            <div class="newlength-num">
                                已拼<span>{{ groupBuys.group_hasNum }}</span>件
                            </div>
                        </div>
                        <div class="newPriceBox">
                            <div class="newPriceBoxLeft">
                                <div class="newPriceBoxLeft1">
                                    <div class="zhijiang">
                                        直降{{ groupBuys.nomal_price - groupBuys.group_price }}元
                                    </div>
                                    <div>
                                        结束恢复{{ groupBuys.nomal_price | getPriceFront }}.{{
            groupBuys.nomal_price | getPriceEnd
        }}
                                    </div>
                                </div>
                                <div class="newPriceBoxLeft2">
                                    <div class="richang">日常价</div>
                                    <div>
                                        ¥{{ groupBuys.nomal_price | getPriceFront }}.{{
            groupBuys.nomal_price | getPriceEnd
        }}
                                    </div>
                                </div>
                            </div>
                            <div class="newPriceBoxRight">
                                <div>限时秒杀</div>
                                <div class="miaoshapriceBox">
                                    ￥{{ groupBuys.group_price | getPriceFront }}.{{
            groupBuys.group_price | getPriceEnd
        }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 新限时秒杀 结束 -->

            <!-- 专区 开始· -->
            <div v-if="zqList.length != 0">
                <div class="specialArea" v-for="(item, iIndex) in zqList" :key="iIndex">
                    <div class="areaHeader">
                        <div>
                            <!-- 门店专区 -->
                            <div class="seckTit">{{ item.specialName }}</div>
                        </div>
                        <div @click="toMoreZq(item.specialId, 0, 0)">
                            更多
                            <van-icon name="arrow"></van-icon>
                        </div>
                    </div>
                    <!-- 商品图片 -->
                    <img @click="toMoreZq(item.specialId, 0, 0)" class="specialImg"
                        :src="alPath + 'zhonghui/special/' + item.specialImg" al="" />
                    <!-- 商品展示区 -->
                    <div class="specialGoods">
                        <div class="specialGoodsItem" v-for="(product, index) in item.productList" :key="index"
                            @click="hrefOpne(product, 'goods', 'small')">
                            <img class="specialItemImg" :src="alPath + 'zhonghui/product/' +
            product.productPic
            " alt="" />

                            <div class="specialPrice">
                                <span class="tuiIcon">推</span> ￥<span>{{
                                    product.productPrice | getPriceFront
                                    }}</span>.<span class="newXiaoshu">{{
                                    product.productPrice | getPriceEnd
                                    }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 专区 结束 -->


            <img src="../../assets/index/top.png" @click="backTop" v-show="back_top" class="back-top" alt="" />

        </van-pull-refresh>

        <div class="appNavBox">
            <div>
                <img src="../../assets/navIcon/home2.png" alt="" />
                <span>首页</span>
            </div>
            <div @click="toPageUrl('/luntan')">
                <img src="../../assets/navIcon/luntan1.png" alt="" />
                <span>社区</span>
            </div>
            <div @click="toPageUrl('/geren')">
                <img src="../../assets/navIcon/geren1.png" alt="" />
                <span>我的</span>
            </div>
        </div>

    </div>
</template>

<script>
import { listMain } from "../../network/index";
import { alPath } from "../../network/request";
export default {
    name: "HomeR",
    data() {
        return {
            alPath,
            isLoading: false,
            showPinpai: false, //新人礼包
            isGetOne: false,
            newGoods: [], //新品推荐
            cartnum: 0, //购物车数量
            mainPics: [], //轮播图
            categories: [], //分类
            healthDailies: [], //每日健康
            productShop: [], //门诊专区
            vitalityProducts: [], //会员专区
            productShop0: [], //瀑布流
            groupBuys: "", //团购秒杀
            isLoading: false,
            isShow: true,
            loading: false,
            finished: false,
            length: 50,
            time: 30 * 60 * 60 * 1000,
            page: 1,
            goldenUser: {},
            back_top: false,
            is_on: -1,
            isCoupon: false,
            coupon: "",
            active: 0,
            mainPro: [],
            zqList: [],
            hyList: [],
            specialIdList: [0, 0, 0, 0, 0, 0], // 3522 门店专区id

            shopId: localStorage.shopId,
            shopFlag: true,
        };
    },
    mounted() { },
    methods: {
        toPage(flag) {
            if (flag == 1) {
                // 储值金
                this.$router.push('/rechargeIndex')
            } else {
                // 全年免疫
                this.$router.push('/activeIndex')
            }
        },
        toPageUrl(url) {
            this.$router.push(url)
        },
        toMoreZq(id, flag, vipFlag) {
            if (!this.isLoginIn()) {
                return
            }


            if (id == 0) {
                this.$toast("暂未设置专区");
                return
            }

            localStorage.vipFlag = vipFlag
            localStorage.specialCategroyFlag = flag;

            console.log(id);

            localStorage.specialCategroyId = id
            localStorage.specialCategroyFlag = flag;

            this.$router.push('/zqProduct')


        },

        hrefBanner(id, url) {
            if (url == 'javascript:void(0)') {
                return
            } else {
                if (url == 'detail') {
                    localStorage.product_id = id
                } else if (url == 'forumKonwledge') {
                    localStorage.topic_id = id;
                } else if (url == 'videoDetail') {
                    localStorage.hv_id = id;
                }
                this.$router.push('/' + url)
            }

        },
        toMore() { },
        hrefOpneNews() { },
        backTop() {
            var timer = setInterval(function () {
                var osTop = document.documentElement.scrollTop || document.body.scrollTop;
                var ispeed = -20;
                document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed;
                if (osTop === 0) {
                    clearInterval(timer);
                }
            }, 1)
        },
        //调走
        hrefOpne: function (num, type, status) {
            if (type == "cart") {
                this.isLoginIn();
                this.$router.push('/shopCar')
            }
            if (type == "mainPics") {
                var url = num.mainUrl;
                localStorage.product_id = num.proId;
                this.$router.push(url)
            } else if (type == "goods") {
                localStorage.product_id = num.productId;
                this.$router.push('/detail')
            } else if (type == "search") {
                this.$router.push('/search')
            }
        },


        isLoginIn() {
            console.log(localStorage.userId);
            if (localStorage.userId == undefined) {
                this.$router.replace("/wxLogin");
                return;
            } else {
                return true;
            }
        },

        getData() {
            listMain({
                shopId: localStorage.shopId,
            }).then((res) => {
                if (res.flag) {
                    this.isLoading = false;
                    console.log(res);

                    var res = res.data;
                    console.log(res);
                    this.mainPics = res.bannerList;
                    this.zqList = res.specials;

                    res.specials.forEach((item) => {
                        if (item.specialName.includes("心")) {
                            this.specialIdList[0] = item.specialId;
                        }
                        if (item.specialName.includes("肺")) {
                            this.specialIdList[1] = item.specialId;
                        }
                        if (item.specialName.includes("肝")) {
                            this.specialIdList[2] = item.specialId;
                        }
                        if (item.specialName.includes("胃")) {
                            this.specialIdList[3] = item.specialId;
                        }
                        if (item.specialName.includes("肾")) {
                            this.specialIdList[4] = item.specialId;
                        }
                        if (item.specialName.includes("脾")) {
                            this.specialIdList[5] = item.specialId;
                        }
                    });
                    console.log(this.specialIdList);


                }
            });
        },

        resHandle() {
            this.isLoading = true;
            this.getData();
        },
    },
    created() {
        this.getData();
    },
    //计算属性
    computed: {},
    filters: {
        isInteger: function (obj) {
            return Math.floor(obj) === obj;
        },
        toFixed2: function (value) {
            //保留两位小数
            return (value * 1).toFixed(2);
        },
        getPriceFront: function (value) {
            //获取价格整数部分
            return (value * 1).toFixed(2).toString().split(".")[0];
        },
        getPriceEnd: function (value) {
            //获取价格小数部分
            return (value * 1).toFixed(1).toString().split(".")[1];
        },
    },
};
</script>

<style scoped>
#app,
.pageCon {
    padding-bottom: 200px;
    background: #f2f2f2;
}

.indexHeader {
    color: #fff;
    padding: 92px 112px 0 24px;
    position: fixed;
    box-sizing: border-box;
    height: 188px;
    width: 100%;
    z-index: 2008;
    background-color: #ed0a2b;
}

.search {
    height: 64px;
    border-radius: 32px;
    position: relative;
    line-height: 64px;
    padding-left: 24px;
    font-size: 32px;
    background: rgba(225, 225, 225, 0.2);
}

.searchTip {
    margin-left: 60px;
    color: rgba(225, 225, 225, 0.7);
}

.search img {
    width: 36px;
    position: absolute;
    left: 24px;
    top: 12px;
}

.cart {
    position: absolute;
    font-size: 44px;
    right: 40px;
    bottom: 28px;
}

.cart-num {
    position: absolute;
    z-index: 12;
    right: -50%;
    top: -12px;
    display: inline-block;
    box-sizing: border-box;
    min-width: 32px;
    padding: 0 6px;
    color: #fff;
    font-weight: 500;
    font-size: 24px !important;
    font-family: -apple-system-font, Helvetica Neue, Arial, sans-serif;
    line-height: 1.2;
    text-align: center;
    background-color: #ee0a24;
    border: 2px solid #fff;
    border-radius: 50%;
}

.content {
    padding: 520px 24px 24px 24px;
    position: relative;
    background: #f2f2f2;
}

.content::before {
    height: 200px;
    position: absolute;
    width: 100%;
    background-color: #ed0a2b;
    left: 0;
    top: 160px;
    content: "";
}

.my-swipe {
    margin-bottom: 32px;
    border-radius: 16px;
    overflow: hidden;
    min-height: 3000px;
    margin-top: 28px;
    position: absolute;
    left: 0;
    width: 100%;
    top: 164px;
}

.van-swipe-item {
    padding: 0 24px;
    box-sizing: border-box;
}

.my-swipe img {
    width: 100%;
    height: 300px;
    display: block;
    border-radius: 16px;
}

.type-box img {
    width: 11.73vw;
    height: 11.73vw;
}

.type-box {
    display: flex;
    flex-wrap: wrap;
}

.type-box>div {
    width: 25%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.type-box>div>div {
    margin-bottom: 24px;
    padding-top: 16px;
    font-size: 24px;
    line-height: 24px;
}

.template {
    position: relative;
    padding-top: 88px;
    display: flex;
    background-color: #fff;
    justify-content: space-between;
    padding: 88px 24px 24px 24px;
    box-sizing: border-box;
    border-radius: 16px;
    margin-bottom: 24px;
    min-height: 596px;
}

.temp-title {
    position: absolute;
    left: 0;
    top: 32px;
    font-size: 32px;
    font-weight: bold;
    line-height: 32px;
}

.goods {
    width: 49%;
    background-color: #ffffff;
    border-radius: 16px;
    overflow: hidden;
}

.box-new-bettow {
    position: relative;
    padding-top: 88px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.goods-img {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
}

.goods-img img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.goods-info {
    padding: 20px 16px 24px;
    position: relative;
}

.delPrice {
    margin-left: 20px;
    color: #cccccc;
    font-weight: 400;
}

.jinkaPrice {
    display: flex;
    position: relative;
    margin-top: 6px;
    font-size: 24px;
    color: #333333;
    font-weight: 600;
}

.newXiaoshu1 {
    font-size: 24px !important;
}

.vipTip1 {
    position: relative;
    margin-left: 14px;
    margin-top: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 96px;
    height: 24px;
    background: #c72a31;
    border-radius: 24px 6px 2px 0px;
    -webkit-border-radius: 12px 3px 1px 0px;
    -moz-border-radius: 12px 3px 1px 0px;
    -ms-border-radius: 12px 3px 1px 0px;
    -o-border-radius: 12px 3px 1px 0px;
}

.vipTip1 span {
    position: absolute;
    left: 6px;
    top: -8px;
    line-height: 40px;
    font-size: 24px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #ffffff;
    transform: scale(0.75);
}

.vipTip1 img {
    position: absolute;
    top: 4px;
    right: 6px;
    width: 16px;
    height: 16px;
}

.vipTip11 {
    background-color: #282828;
}

.vipTip11 span {
    color: #e5cda0;
}

.goods-info>div:nth-child(1) {
    font-size: 28px;
    line-height: 32px;
    height: 32px;
    overflow: hidden;
    font-weight: bold;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-bottom: 16px;
    color: #333;
}

.goods-info>div:nth-child(2) {
    font-size: 24px;
    line-height: 24px;
    color: #666;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-bottom: 24px;
}

.goods-info>div:nth-child(3) {
    font-size: 24px;
    line-height: 24px;
    color: #ff3b14;
    font-weight: bold;
}

.goods-info>div:nth-child(3) span {
    font-size: 36px;
}

.goods-info>del:nth-child(4) {
    position: absolute;
    right: 20px;
    bottom: 20px;
    font-size: 24px;
    color: #999;
    transform: scale(0.9);
}

.goods-info>div:nth-child(5) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    font-size: 24px;
    font-weight: 500;
    box-sizing: border-box;
    padding-left: 16px;
    color: #282828;
    line-height: 40px;
    background: linear-gradient(90deg, #e9d3a9, #d3ad72);
    border-radius: 0 0 0 16px;
}

.goods-info>div:nth-child(6) {
    position: absolute;
    right: 0;
    top: -8px;
    line-height: 32px;
    background-color: #282828;
    color: #e5cc9e;
    height: 48px;
    border-radius: 48px 0 0 0;
    box-sizing: border-box;
    padding: 2px 8px 0 36px;
}

.goods-info>div:nth-child(6)::before {
    position: absolute;
    content: "￥";
    font-size: 24px;
    left: 16px;
    height: 100%;
    box-sizing: border-box;
    padding-top: 12px;
}

.goods-info>div:nth-child(6) span {
    font-size: 36px;
    font-weight: bold;
}

.priX {
    font-size: 28px !important;
}

.goods-info>div:nth-child(7) {
    position: absolute;
    font-size: 24px;
    background-color: #ff3b14;
    height: 32px;
    line-height: 32px;
    color: #fff;
    bottom: 64px;
    border-radius: 4px 4px 24px 4px;
    left: 0;
    padding: 0 24px 0 20px;
    font-weight: 400;
    box-sizing: border-box;
}

.more {
    position: absolute;
    right: 24px;
    top: 24px;
    font-size: 24px;
    color: #666;
    display: flex;
    align-items: center;
}

.seckill-new {
    padding: 16px 0;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 24px;
    min-height: 336px;
    box-sizing: border-box;
    width: calc(100vw - 48px);
    left: 24px;
    background: url(../../assets/index/bg.png) no-repeat -12px;
    background-size: 106% 100%;
    background-color: #fff;
}

.seckill-new-time {
    box-sizing: border-box;
    padding: 0 26px;
    display: flex;
    align-content: center;
    justify-content: space-between;
    width: 100%;
    height: 72px;
}

.seckill-new-time>div {
    display: flex;
    align-items: center;
    line-height: 42px;
}

.seckTit {
    margin-right: 26px;
    font-size: 34px !important;
    font-family: FZZongYi-M05S !important;
    font-weight: bold !important;
    color: #333333 !important;
}

.block-new {
    position: relative;
    margin-right: 18px;
    width: 48px;
    height: 42px;
    line-height: 42px;
    text-align: center;
    background-color: #ed0a2b;
    border-radius: 10px;
    font-size: 34px;
    font-family: Alte DIN 1451 Mittelschrift gepraegt;
    font-weight: 400;
    color: #ffffff;
}

.block-new::before {
    position: absolute;
    top: 20px;
    left: 0;
    z-index: 1;
    content: "";
    width: 48px;
    height: 2px;
    background-color: #fab7c1;
}

.seckill-new-time>div:last-child {
    font-size: 24px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #666666;
    line-height: 44px;
}

.colon-new {
    margin-right: 18px;
    font-size: 24px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #ed0a2b;
}

.seckill-new-main {
    box-sizing: border-box;
    display: flex;
    padding: 10px 22px 20px 14px;
    width: 100%;
}

.seckill-new-img {
    margin-right: 12px;
    width: 35%;
    height: 240px;
    border-radius: 10px;
}

.seckill-new-mainLeft {
    flex: 1;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.seckillNewName {
    font-size: 28px;
    line-height: 28px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #333333;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.seckillNewTag {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.seckillNewTag span:first-child {
    padding: 6px 10px;

    background: #ed0a2b;
    border-radius: 8px;
    font-size: 24px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #ffffff;
}

.seckillNewTag span:nth-child(2) {
    padding: 4px 12px;

    border: 2px solid #ff3b14;
    border-radius: 4px;
    font-size: 24px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ff3b14;
}

.seckillNewTag span:nth-child(3) {
    padding: 4px 12px;

    border: 2px solid #ed0a2b;
    border-radius: 4px;
    font-size: 24px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ed0a2b;
}

.lineBox {
    display: flex;
    height: 24px;
    align-items: center;
}

.newlength-box {
    width: 264px;
    height: 24px;
    text-align: center;
    position: relative;
    background: #ffebe7;
    border-radius: 14px;
}

.newlength {
    position: absolute;
    height: 100%;
    left: 0;
    background: linear-gradient(-90deg, #e01a37, #ed0a2b);
    box-shadow: 0px 0px 0px 2px #ffffff, 0px 4px 8px 0px rgba(255, 255, 255, 0.68);
    border-radius: 14px;
}

.newlength-num {
    font-size: 24px;
    line-height: 24px;
    color: #999;
    padding-left: 8px;
}

.newlength-num span {
    color: #ff8023;
    padding: 0 4px;
}

.newlength-box span {
    position: absolute;
    top: -4px;
    font-size: 24px;
    width: 100%;
    text-align: center;
    display: block;
    z-index: 12;
    font-family: Source Han Sans CN;
    font-weight: 400;

    color: #000;
    opacity: 1;
}

.newPriceBox {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.newPriceBoxLeft {
    box-sizing: border-box;
    display: flex;

    height: 88px;
    border: 2px solid #ed0a2b;
    border-radius: 4px;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #999999;
    white-space: nowrap;
}

.newPriceBoxLeft1 {
    box-sizing: border-box;
    padding: 12px 8px;
    height: 100%;
    border-right: 2px solid #ed0a2b;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #999999;
}

.newPriceBoxLeft2 {
    padding: 12px 10px;
    text-align: center;
}

.zhijiang {
    font-size: 24px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #ed0a2b;
    line-height: 30px;
}

.richang {
    line-height: 30px;
    font-size: 20px;
}

.newPriceBoxRight {
    box-sizing: border-box;
    padding: 12px 12px;
    width: 30%;
    height: 88px;
    max-height: 100%;
    background: #ff3b14;
    border-radius: 4px;
    font-size: 20px;
    font-family: FZZongYi-M05S;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
    white-space: nowrap;
}

.newPriceBoxRight div {
    text-align: center;
}

.miaoshapriceBox {
    font-size: 24px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #ffffff;
}

.specialArea {
    padding: 20px;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 24px;
    min-height: 336px;
    box-sizing: border-box;
    width: calc(100vw - 48px);
    left: 24px;
    background: url(../../assets/index/bg.png) no-repeat -12px;
    background-size: 106% 105%;
    background-color: #fff;
}

.areaHeader {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.titImg {
    width: 126px;
    height: 30px;
}

.areaHeader div:first-child {
    font-size: 34px;
    font-family: FZZongYi-M05S;
    font-weight: bold;
    color: #333333;
}

.areaHeader div:last-child {
    display: flex;
    align-items: center;
    font-size: 24px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #666666;
    line-height: 44px;
}

.specialImg {
    margin-bottom: 10px;
    width: 100%;
    height: 360px;
    border-radius: 8px;
}

.specialGoods {
    width: 100%;
    display: flex;
}

.specialGoods .specialGoodsItem:not(:last-child),
.specialGoods .specialGoodsItem1:not(:last-child) {
    margin-right: 18px;
}

.specialGoodsItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    height: 100%;
}

.specialGoodsItem1 {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
}

.specialItemImg {
    margin-bottom: 16px;
    width: 100%;
    /* height: calc(width); */
    border-radius: 8px;
}

.specialPrice {
    display: flex;
    margin-bottom: 0px;
    font-size: 28px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #333333;
}

.specialPrice1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0px;
    font-size: 32px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #c72a31;
}

.moneyTip {
    font-size: 24px;
    transform: scale(0.75) !important;
    -webkit-transform: scale(0.75) !important;
    -moz-transform: scale(0.75) !important;
    -ms-transform: scale(0.75) !important;
    -o-transform: scale(0.75) !important;
}

.vipTip {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 96px;
    height: 24px;
    background: #c72a31;
    border-radius: 24px 6px 2px 0px;
    -webkit-border-radius: 24px 6px 2px 0px;
    -moz-border-radius: 24px 6px 2px 0px;
    -ms-border-radius: 24px 6px 2px 0px;
    -o-border-radius: 24px 6px 2px 0px;
}

.vipTip span {
    line-height: 40px;
    font-size: 24px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #ffffff;
    transform: scale(0.75);
}

.vipTip img {
    width: 16px;
    height: 16px;
}

.specialDelPrice {
    font-size: 24px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #cccccc;
    transform: scale(0.9);
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
}

.specialDelPrice1 {
    position: relative;
    left: -24px;
    font-size: 32px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #cccccc;
    transform: scale(0.75);
}

.tuiIcon {
    display: block;
    text-align: center;
    width: 40px;
    height: 40px;
    font-size: 24px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #ffffff;
    background: url(../../assets/index/yuanjiaobeijing.png) no-repeat;
    background-size: 100%;
}

.newXiaoshu {
    margin-top: 4px;
    display: flex;
    align-items: center;
    font-size: 20px !important;
}

.newXiaoshu1 {
    font-size: 20px !important;
}

.proPriceFront {
    font-size: 32px !important;
}

.proPriceEnd {
    font-size: 24px !important;
}

.seckill {
    position: relative;
    padding-top: 88px;
    background-color: #fff;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 24px;
    height: 248px;
    padding-left: 272px;
    min-height: 336px;
    box-sizing: border-box;
    width: calc(100vw - 48px);
    left: 24px;
}

.seckill-time {
    position: absolute;
    height: 88px;
    left: 0;
    top: 0;
    width: 100%;
    background-color: #ffecbd;
}

.seckill-img {
    width: 248px;
    height: 248px;
    border-radius: 16px;
    position: absolute;
    left: 0;
}

.seckill-name {
    font-size: 28px;
    font-weight: bold;
    padding-top: 24px;
    line-height: 28px;
    margin-bottom: 20px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.seckill-tag {
    display: flex;
    margin-bottom: 16px;
    white-space: nowrap;
}

.seckill-tag>div {
    width: 120px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    font-size: 24px;
    border-radius: 4px;
    white-space: nowrap;
}

.seckill-tag>div:nth-child(1) {
    background-color: #fff8e7;
    color: #ffb90f;
    margin-right: 24px;
}

.seckill-tag>div:nth-child(2) {
    background-color: #ffeeeb;
    color: #ff5d37;
}

.seckill-length {
    display: flex;
    height: 24px;
    align-items: center;
    margin-bottom: 16px;
}

.length-box {
    width: 264px;
    height: 24px;
    background-color: #f0f0f0;
    border-radius: 24px;
    text-align: center;
    position: relative;
}

.length {
    position: absolute;
    height: 100%;
    left: 0;
    background-color: #ff8023;
    border-radius: 24px;
}

.length-num {
    font-size: 24px;
    line-height: 24px;
    color: #999;
    padding-left: 8px;
}

.length-num span {
    color: #ff8023;
    padding: 0 4px;
}

.length-box span {
    position: absolute;
    font-size: 24px;
    width: 100%;
    text-align: center;
    display: block;
    z-index: 12;
}

.seckill-price {
    position: relative;
    padding-right: 24px;
}

.xian {
    width: 100%;
    height: 72px;
    display: block;
}

.seckill-btn {
    position: absolute;
    width: 148px;
    height: 56px;
    line-height: 56px;
    color: #fff;
    font-weight: bold;
    border-radius: 28px;
    text-align: center;
    right: 24px;
    bottom: 12px;
    background-color: #ff3b14;
}

.old-price {
    position: absolute;
    bottom: 0px;
    font-size: 24px;
    color: #999;
    line-height: 24px;
}

.old-price>div:nth-child(1) {
    margin-bottom: 4px;
}

.vip-title {
    line-height: 36px;
    font-size: 32px;
    font-weight: bold;
    position: relative;
}

.vip::before {
    content: "VIP";
    position: absolute;
    right: 24px;
    top: 0;
    font-size: 120px;
    font-weight: bold;
    color: #f4e4cd;
    background: linear-gradient(0deg, #f4e4cd 0%, #fcf5ed 50%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.seckill-time {
    display: flex;
    align-items: center;
    padding-left: 24px;
}

.seckill-time img {
    width: 164px;
    height: 32px;
    display: block;
    margin-right: 12px;
}

.block {
    background-color: #000;
    color: #fff;
    width: 40px;
    height: 32px;
    min-width: 40px;
    display: block;
    line-height: 32px;
    text-align: center;
    border-radius: 4px;
    font-weight: bold;
    font-size: 24px;
}

.van-count-down {
    display: flex;
    align-items: center;
}

.colon {
    color: #ffb90f;
}

.vip {
    position: relative;
    padding-top: 88px;
    margin-bottom: 24px;
    border-radius: 16px;
    padding-bottom: 24px;
    background: linear-gradient(141deg,
            rgba(255, 244, 225, 0.94),
            rgba(250, 225, 203, 0.94));
}

.vip-title {
    position: absolute;
    left: 24px;
    top: 24px;
}

.vip-box {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: scroll;
    padding-left: 24px;
}

.vip-goods {
    width: 260px;
    min-width: 260px;
    border-radius: 16px;
    overflow: hidden;
    margin-right: 24px;
}

.vip-img {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
}

.vip-img img {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

.vip-info {
    background-color: #fff;
    position: relative;
    background: url(../../assets/index/lightning.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    padding: 12px 0 8px 0;
}

.vip-name {
    font-size: 28px;
    line-height: 28px;
    font-weight: bold;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background-color: #fff;
    padding: 24px;
}

.vip-price {
    font-size: 24px;
    width: 50%;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.vip-price>div:nth-child(1) {
    text-align: center;
}

.tal {
    text-align: left;
    box-sizing: border-box;
    padding-left: 24px;
}

.tar {
    text-align: right;
    box-sizing: border-box;
    padding-right: 24px;
}

.vip-price span {
    font-size: 36px;
}

.hot-title {
    font-size: 32px;
    line-height: 36px;
    color: #f61616;
    font-weight: bold;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.newHot {
    border-radius: 20px;
    padding: 30px 20px;
    background-color: #fff;
}

.newHotHeader {
    position: relative;
    display: flex;
}

.hottitleimg {
    margin-left: 12px;
    width: 128px;
    height: 32px;
}

.smallYuan {
    position: absolute;
    top: -4px;
    left: 200px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #faedee;
}

.bigYuan {
    position: absolute;
    top: -32px;
    right: 40px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background-color: #faedee;
    z-index: 1;
}

.van-tab__text--ellipsis {
    font-size: 24px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #666666;
}

.van-tab--active .van-tab__text--ellipsis {
    font-size: 32px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #333333;
    z-index: 2;
}

.van-tabs__line {
    width: 10%;
    height: 10px;
    background: #ed0a2b;
    opacity: 0.7;
    bottom: 56px;
    left: -2px;
}

.newHotCard {
    box-shadow: 0px 2px 8px 0px rgba(94, 94, 94, 0.2);
    border-radius: 8px;
}

.hot {
    padding: 0 24px;
}

.white {
    background-color: #fff;
    margin-bottom: 12px;
}

::-webkit-scrollbar {
    display: none;
}

.hot-icon {
    width: 32px;
}

.tal12px {
    text-align: left !important;
    padding-left: 24px !important;
    box-sizing: border-box !important;
}

.new-cont {
    position: relative;
    padding: 84px 24px 24px 24px;
    border-radius: 16px;
    margin-bottom: 24px;
    background: #fff;
}

.shop-goods {
    position: relative;
    overflow-x: scroll;
    display: flex;
    box-sizing: border-box;
    flex-wrap: nowrap;
    border-radius: 16px;
}

.shop-goods>.shop-goods-item>div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shop-goods>.shop-goods-item {
    background-color: #f2f2f2;
    border-radius: 16px;
    width: 240px;
    margin-right: 24px;
    overflow: hidden;
    min-width: 240px;
    position: relative;
}

.shop-goods>.shop-goods-item>img {
    width: 240px;
    height: 240px;
    display: block;
    border-radius: 16px 16px 0 0;
    background-color: #f2f2f2;
    box-shadow: 0 4px 4px #dcdcdc;
}

.shop-goods>.shop-goods-item>div:nth-child(2) {
    line-height: 32px;
    font-weight: bold;
    font-size: 28px;
    padding: 24px 20px 0 20px;
}

.shop-goods>.shop-goods-item>div:nth-child(3) {
    line-height: 28px;
    font-size: 24px;
    color: #666;
    padding: 20px 20px 0 20px;
}

.shop-goods>.shop-goods-item>div:nth-child(4) {
    font-weight: bold;
    color: #ff3b14;
    line-height: 28px;
    padding: 12px 20px 16px 20px;
    font-size: 24px;
}

.shop-goods>.shop-goods-item>del {
    position: absolute;
    right: 12px;
    bottom: 12px;
    font-size: 28px;
    color: #ffa593;
    font-size: 24px;
    transform: scale(0.9);
}

.centerTop {
    position: absolute;
    z-index: 20;
    line-height: 32px;
    font-weight: bold;
    font-size: 32px;
    color: #333;
    top: 32px;
    left: 24px;
    width: 100%;
}

.centerTop-box {
    position: relative;
    margin-top: 56px;
}

.new-more {
    color: #666 !important;
    z-index: 20;
    top: 32px;
}

.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.warp {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.van-overlay {
    z-index: 30000;
}

.pupBc_2 {
    width: 748px;
}

.pupBc {
    position: absolute;
    width: 560px;
    top: 50%;
    left: 50%;
    margin-left: -280px;
    margin-top: -244px;
}

.pup_2 {
    position: absolute;
    width: 596px;
    margin-top: 188px;
    margin-left: -292px;
    top: 50%;
    left: 50%;
}

.pup_2text {
    position: absolute;
    font-size: 32px;
    font-weight: bold;
    color: #ffffff;
    line-height: 88px;
    margin-top: 468px;
    letter-spacing: 4px;
    margin-top: 188px;
    top: 50%;
}

.feed {
    position: absolute;
    width: 208px;
    top: 50%;
    left: 50%;
    margin-left: -104px;
    margin-top: -100px;
}

.feed_text {
    position: absolute;
    font-size: 28px;
    font-weight: bold;
    color: #b25d0a;
    letter-spacing: 4px;
    top: 50%;
    left: 50%;
    margin-left: -176px;
    margin-top: 132px;
}

.pup_3 {
    position: absolute;
    width: 300px;
    margin-top: 296px;
    top: 50%;
    left: 50%;
    margin-left: -158px;
}

.pup_3text {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: 312px;
    margin-left: -68px;
    font-size: 40px;
    font-weight: bold;
    color: #ffffff;
    width: 136px;
}

.pinpai-box {
    width: 580px;
    height: 428px;
    background: #e8ded1;
    border-radius: 32px 0px 32px 32px;
    position: relative;
    overflow: visible;
}

.pinpai-warp .van-popup {
    overflow: visible;
}

.pinpai-warp .van-popup--center {
    border-radius: 32px 0px 32px 32px;
}

.font_10 {
    font-size: 24px;
    transform: scale(0.2);
    -webkit-transform: scale(0.2);
}

.pinpai_img {
    width: 160px;
    position: absolute;
    top: 1px;
    right: -2px;
}

.pinpai_img-1 {
    width: 80px;
    position: absolute;
    top: 404px;
    left: 20px;
}

.pinpai_img-33 {
    width: 80px;
    position: absolute;
    bottom: 80px;
    left: -20px;
}

.pinpai_img-2 {
    width: 60px;
    position: absolute;
    top: 292px;
    right: -24px;
}

.pinpai_img-22 {
    width: 60px;
    position: absolute;
    top: 184px;
    right: -28px;
}

.pinpai_img-44 {
    width: 60px;
    position: absolute;
    top: 72px;
    left: -32px;
}

.pinpai-con {
    width: 500px;
    position: absolute;
    top: 120px;
    left: 50%;
    margin-left: -250px;
}

.pinpai-item {
    width: 500px;
    height: 120px;
    position: relative;
}

.pinpai_img-3 {
    width: 500px;
    position: absolute;
    top: 0;
    left: 0;
}

.pinpai_img-4 {
    width: 168px;
    position: absolute;
    top: 48px;
    left: 50%;
    margin-left: -84px;
}

.pinpai-info {
    width: 100%;
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    padding: 16px 16px 16px 20px;
}

.pinpai-info::before {
    position: absolute;
    content: "";
    width: 4px;
    height: 80px;
    background-color: #7d5f47;
    top: 28px;
    left: 152px;
    opacity: 0.6;
}

.pinpai-price {
    font-size: 60px;
    font-weight: bold;
    color: #6f4426;
    line-height: 60px;
    box-sizing: border-box;
    padding: 26px 32px 0 0;
}

.pinpai-name {
    font-size: 24px;
    font-weight: bold;
    color: #653817;
    line-height: 24px;
    margin-bottom: 8px;
}

.pinpai-num {
    font-size: 24px;
    font-weight: bold;
    color: #7d5f46;
    line-height: 24px;
    margin-bottom: 4px;
}

.pinpai-time {
    font-weight: bold;
    color: #7d5f46;
    line-height: 24px;
    position: absolute;
    top: 88px;
    left: 164px;
}

.font10 {
    display: inline-block;
    transform: scale(0.8);
    -webkit-transform: scale(0.8);
}

.ml8 {
    margin-left: 16px;
}

.color-BF0C01 {
    color: #bf0c01 !important;
    background: transparent !important;
}

.pinpai-type {
    width: 20px;
    height: 60px;
    font-size: 24px;
    font-weight: bold;
    color: #f0dfc9;
    line-height: 24px;
    position: absolute;
    right: 28px;
    top: 32px;
}

.pinpai_info {
    position: absolute;
    top: 28px;
    left: 180px;
}

.pinpai-cancel {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 18px;
    right: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pinpai-tip {
    position: absolute;
    bottom: 112px;
    left: 50%;
    margin-left: -196px;
    line-height: 24px;
    font-size: 24px;
    font-weight: bold;
    color: #a5622e;
}

.pinpai-ok {
    width: 1647px;
    height: 56px;
    background: linear-gradient(138deg, #4b5166, #4b5166, #273137);
    border-radius: 28px;
    font-size: 24px;
    font-weight: bold;
    color: #e5dcd1;
    line-height: 24px;
    position: absolute;
    bottom: 32px;
    left: 50%;
    margin-left: -82px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.getnew-coupons {
    position: fixed;
    bottom: 334px;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 30;
}

.new_img {
    display: block;
    width: 108px;
}

.new_text {
    background: linear-gradient(153deg, #f0a94c, #f2c68c, #ef9621);
    border: 2px solid #ffffff;
    border-radius: 24px;
    line-height: 24px;
    font-size: 24px;
    font-weight: bold;
    color: #7f140e;
    box-sizing: border-box;
    padding: 12px 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.productName {
    width: 396px;
    font-size: 24px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #333333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bodyBox {
    position: relative;
    width: 100%;
    z-index: 1;
    margin-bottom: 24px;
}

.shopMainBox {
    width: 100%;
    background: linear-gradient(180deg, #f2f2f2, #fff, #f2f2f2);
}

.bodyTitle {
    position: relative;
    box-sizing: border-box;
    padding-left: 40px;
    width: 100%;
    font-family: Source Han Sans CN;
    font-weight: bold;
    font-size: 28px;
    color: #333333;
    z-index: 2;
}

.bodyTitle>span {
    position: relative;
    z-index: 2;
}

.bodyTitle::after {
    position: absolute;
    bottom: 0px;
    left: 40px;
    display: inline-block;
    content: "";
    width: 120px;
    height: 10px;
    background: linear-gradient(48deg, #ed0a2b, #fceeeb);
    z-index: 1;
}

.bodyMain {
    margin: 0 auto;
    width: 702px;
    height: 884.0025px;
    background-image: url(../../assets/index/recharge/mainBodyImg.png);
    background-size: 100% 100%;
    overflow: hidden;
}

.bodyNavBox {
    display: flex;
    flex-direction: column;
    width: 40%;
    margin-top: 32.0025px;
}

.bodyNavBox>span {
    margin-bottom: 27.9975px;
    display: inline-block;
    width: 100%;
    height: 99.9975px;
}

.rechargeEnter {
    margin: 0 auto 12px;
    width: 351px;
    height: 40px;
    border-radius: 8px;
    font-size: 16px;
    background-color: aqua;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

.enterBox {
    position: relative;
    box-sizing: border-box;
    margin: -10px auto 0px;
    width: 100%;
    padding: 0 12px;
}

.enterBox>img:first-child {
    width: 100%;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

.enterBox>img:last-child {
    position: absolute;
    top: 20.0025px;
    right: 39.9975px;
    width: 110.0025px;
    height: 110.0025px;
    animation: round_animate 1s linear infinite;
    -webkit-animation: round_animate 1s linear infinite;
}

@keyframes round_animate {
    0% {
        transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
    }

    50% {
        transform: scale(1.2);
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        -ms-transform: scale(1.2);
        -o-transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

.topBox {
    position: relative;
    margin: 0 auto 20.0025px;
    width: 708.9975px;
    height: 183.9975px;
    background-image: url(../../assets/index/active/topCon.png);
    background-size: 100% 100%;
}

.proImg {
    position: absolute;
    top: 54px;
    left: 54px;
    width: 144px;
    height: 105.9975px;
}

.proName {
    position: absolute;
    top: 69.9975px;
    left: 210px;
    width: 294px;
    height: 44.0025px;
}

.buyBtn {
    position: absolute;
    top: 129.9975px;
    left: 150px;
    width: 296.0025px;
    height: 45.9975px;
    transform: scale(0.5);
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
}
</style>